<script setup lang="ts">
import { $t } from '@/locales';
import { OperateLogType } from '@/constants/custom';

defineOptions({ name: 'OperateLogInfoDialog' });

interface Props {
  logInfo: Api.System.OperateLog.OperateLogRecord | null;
}

defineProps<Props>();

const visible = defineModel<boolean>('visible', {
  default: false
});

// 关闭对话框
function closeDialog() {
  visible.value = false;
}
</script>

<template>
  <ElDialog v-model="visible" title="操作日志详情" width="1000" :close-on-click-modal="false">
    <ElDescriptions :column="1" border label-width="100">
      <ElDescriptionsItem label="操作模块">
        {{ logInfo?.title }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="操作类型">
        {{ OperateLogType[logInfo?.operateType || ''] }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="操作人">
        {{ logInfo?.operatorName }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="操作人IP">
        {{ logInfo?.operatorIpAddr }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="操作地点">
        {{ logInfo?.operatorIpDesc }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="操作状态">
        <ElTag :type="logInfo?.operateStatus === 'SUCCESS' ? 'success' : 'danger'">
          {{ logInfo?.operateStatus === 'SUCCESS' ? '操作成功' : '操作失败' }}
        </ElTag>
      </ElDescriptionsItem>
      <ElDescriptionsItem label="操作时间">
        {{ logInfo?.operateTime }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="操作耗时">{{ logInfo?.operateCost }} ms</ElDescriptionsItem>
      <ElDescriptionsItem label="操作方法">
        {{ logInfo?.operateFunction }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="请求方法">
        {{ logInfo?.requestMethod }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="请求地址">
        {{ logInfo?.requestUri }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="请求参数">
        <ElInput
          readonly
          type="textarea"
          :rows="5"
          :model-value="JSON.stringify(JSON.parse(logInfo?.requestParams || '[]'), null, 4)"
        />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="响应结果">
        <ElInput
          readonly
          type="textarea"
          :rows="5"
          :model-value="JSON.stringify(JSON.parse(logInfo?.responseData || '[]'), null, 4)"
        />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="操作异常">
        <ElInput readonly type="textarea" :rows="5" :model-value="logInfo?.exceptionTrace || '无'" />
      </ElDescriptionsItem>
    </ElDescriptions>
    <template #footer>
      <ElButton @click="closeDialog">{{ $t('common.close') }}</ElButton>
    </template>
  </ElDialog>
</template>

<style scoped>
:deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>
